<template>
  <div class="tongji">
    <div class="tongji-bar">
      <select-bar title="在线客服" v-if="clear">
        <select-bar-item
          v-for="(item, idx) in gongdanItems"
          :idx="idx"
          :key="item.name"
          :title="item.name"
          :clickStyle="item.style"
          :path="'/main/tongji/' + item.type"
          @clearStyle="clearStyle(gongdanItems, $event)"
        ></select-bar-item>
      </select-bar>
    </div>
    <div style="width: 250px; height: 100%"></div>
    <div class="tongji-main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import SelectBar from "@/components/SelectBar/SelectBar";
import SelectBarItem from "@/components/SelectBar/SelectBarItem";
export default {
  components: {
    SelectBar,
    SelectBarItem,
  },
  mounted () {
    this.$store.commit('setTitle','统计')
    this.$store.commit('NavStyleClear','统计')
  },
  data() {
    return {
      clear: true,
      gongdanItems: [
        {
          name: "数据总览",
          type: "sjzl",
          style: true,
        },
        {
          name: "工作量统计",
          type: "gzl",
          style: false,
        },
        {
          name: "工作质量统计",
          type: "gzzl",
          style: false,
        },
        {
          name: "考勤统计",
          type: "kqtj",
          style: false,
        },
        {
          name: "访问统计",
          type: "fwtj",
          style: false,
        },
      ],
    };
  },
  methods: {
    clearStyle(items, ev) {
      this.clear = false;
      for (let i in items) {
        items[i].style = false;
      }
      items[ev].style = true;
      this.$nextTick(() => {
        this.clear = true;
      });
      console.log("gdan");
      console.log(ev);
    },
  },
};
</script>

<style>
.tongji {
  width: 100%;
  height: 108%;
  /* background-color: #999999; */
  display: flex;
}

.tongji-bar {
  width: 200px;
  height: 100%;
  position: fixed;
}

.tongji-main {
  width: 100%;
  height: 105%;
  margin-left: 35px;
  /* background-color: #ffffff; */
}
</style>